<template>
	<view class="body">
		<image src="../../static/73a8081d60061d61507434a2a2250e2.jpg" mode="" class="b-img"></image>
		<text class="title">同样的TA</text>
		<!-- form表单 -->
		<view class="form">
			<!-- 姓名输入框 -->
			<input v-model="user_data.realName" type="text" placeholder='请输入真实姓名查询' class="name-input" />
			
			<!-- 日期选择器 -->
			<view class="center-box">
				<view class="birth-input">

					<view class="uni-list">
						<view class="uni-list-cell">

							<view class="uni-list-cell-db">
								<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
									<view class="uni-input" style="margin-top: 17rpx;" v-if='b_data'>{{date}}</view>
									<view class="uni-input" style="margin-top: 17rpx;opacity: 0.8;" v-if='b_text' @click="handbay">出生日期</view>
								</picker>
							</view>
						</view>
					</view>
				</view>

			</view>



			<u-action-sheet :list="list" v-model="show" @click="actionSheetCallback"></u-action-sheet>
			<u-select v-model="a_show" mode="mutil-column-auto" :list="a_list" @confirm="bindPickerChange"></u-select>
			<view>
				<!-- 地区选择器 -->
				<view class="area-input" @click="a_show=true">
					<view style="margin-top: 17rpx;">{{address}}</view>
				</view>

			</view>
			<!-- 性别选择器 -->
			<view class="sex-box">
				<u-radio-group v-model="user_data.sex">
					<u-radio name="男">
						男
					</u-radio>
					<u-radio name='女'>
						女
					</u-radio>
				</u-radio-group>
			</view>
			
			<u-button type="success" :custom-style="customStyle" size="medium" @click="handgetinto">观看广告，查询同样的TA</u-button>
			<!-- 中间提示文字 -->
			<view class="middle-text">
				<text>请输入真实信息</text><br/>
				<text>我们会用这些信息帮你进行匹配</text><br/>
				<text>让你通过抖音认识同样的ta</text><br/>
			</view>      
			<!-- 底部提示文字 -->
			<view class="tips-text">
				<text>
					我们通过您的名字，生日，出生地等非敏感信息，帮您通过抖音号找到同
				</text>
				<text>
					样的TA，认识TA，同时请在抖音的互动交流中注意防骗。
				</text>
				<text>全国同名查询，由地方政务数据提供，仅供参考娱乐！</text>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import
	provinces from '../../uview-ui/libs/util/province.js'
	import citys from '../../uview-ui/libs/util/city.js';

	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {

				a_show: false,
				a_list: [],
				title: 'picker',
				date: currentDate,
				count: 0,
				popup_show: false,
				name: '',
				customStyle: {
					'margin-left': '15rpx',
					'margin-top': '100rpx',
					'position': 'relative',
					'top': '100rpx',

				},
				user: {
					'type': 'douyin',
					'anonymousCode': '',
					'code': '',
					'avatarUrl': '',
					'nickName': '',
				},
				params: {
					// area: true,
					city: true,
					province: true,
				},
				list: [{
						text: '男'
					},
					{
						text: '女'
					},
				],
				sex: '',
				user_data: {
					realName: '',
					sex: '男',
					birthTime: '',
					area: '出生地区',
				},

				address: '出生地区',
				b_show: false,
				show: false,

				b_data: false,
				b_text: true,
			}
		},
		mounted() {



		},
		onLoad() {
			const app = getApp()
			app.globalData.currentPage = this
		},
		onShareAppMessage(option) {
			console.log(option,'分享')
			return {
				title: '快来康康同样的TA',
				desc: '这是默认的转发文案，用户可以直接发送，也可以在发布器内修改',
				path: '/page/login/index', // ?后面的参数会在转发页面打开时传入onLoad方法

				templateId: 'xmqi3vul2929i5gn3b',
				success() {
					console.log('转发发布器已调起，并不意味着用户转发成功，微头条不提供这个时机的回调');
				},
				fail() {
					console.log('转发发布器调起失败');
				}
			}
		},
		created() {
			this.a_list = provinces
			if (this.a_list[0].label == '全部') {
				this.a_list.shift()
			}
			for (let i = 0; i < citys.length; i++) {
				this.a_list[i].children = [],
					this.a_list[i].children = citys[i]

			}
			this.login();

		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},

		methods: {

			// 点击出生日期
			handbay() {

				this.b_text = false
				this.b_data = true
			},
			//获取选择的地区数据
			bindPickerChange(e) {
				console.log(e)
				this.address = e[0].label + e[1].label
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//获取选择日期
			bindDateChange(e) {
				this.date = e.target.value

			},
			//用户观看完广告
			closeAdFunction() {
				this.tohome()
			},
			//用户取消广告
			cancelAdFunction() {
				console.log('用户取消')
			},
			//播放广告
			playad() {
				const app = getApp()
				app.globalData.playAd()
			},
			//点击进入同样的TA
			handgetinto() {
				this.user_data.birthTime = this.date
				this.user_data.area = this.address
				if (this.user_data.realName != '' && this.user_data.sex != '' && this.user_data.birthTime != '' && this.user_data.area !=
					'' && this.user_data.area != '出生地区') {
					this.playad()
				} else {

					this.$refs.uToast.show({
						title: '信息必须填写完整',
						type: 'error',

					})
				}
			},

			//填写数据完毕进入主页
			tohome() {
				var authorization = uni.getStorageSync('authorization')

				this.user_data.birthTime = this.date
				this.user_data.area = this.address
				var user = {
					sex: this.user_data.sex,
					birthTime: this.user_data.birthTime,
					realName: this.user_data.realName,
					area: this.user_data.area,
					isUpdate: 0,

				}
				if (this.user_data.sex == '男') {
					this.user.birthTime = this.date
					user.sex = 0
				} else if (this.user_data.sex == '女') {
					user.sex = 1
				}
				this.$u.post('/system/user/profile', user).then(res => {
					console.log(res, '返回数据')
					this.getinfo();
					uni.switchTab({
						url: '../home/home'
					});

				}).catch(err => {
					console.log(err, '错误数据')

				})





			},

			getinfo() {
				//获取个人信息
				this.$u.get('/system/user/profile', ).then(res => {
					console.log(res, '获取用户个人信息成功')
					this.user = res.data
					uni.setStorageSync('name', res.data.realName);
					uni.setStorageSync('birthTime', res.data.birthTime)

				})
			},
			//判断是否填写过个人信息
			judge() {

				this.$u.post('/system/user/profile/checkIsAllowQuery', {}).then(res => {
					if (res.data == false) {
						console.log('未跳转')

					} else {
						this.getinfo();
						uni.switchTab({
							url: '../home/home'
						});

					}

				})
			},



			// 获取选择的性别数据
			actionSheetCallback(index) {
				this.user_data.sex = this.list[index].text;

			},
			// 获取用户抖音信息
			getUserInfo() {

				tt.getUserInfo({
					// provider: 'toutiao',

					success: (res) => {

						this.user.avatarUrl = res.userInfo.avatarUrl
						this.user.nickName = res.userInfo.nickName
						this.Local_login()
					},
					fail(err) {
						console.log(err, '获取用户信息失败')
					}

				});


			},
			//本地登录
			Local_login() {
				console.log(this.user, '本地登录请求参数')
				this.$u.post('/api/ttMiniAppLogin',
					this.user
				).then(res => {

					uni.setStorageSync('authorization', res.data.token);
					this.judge();
				}).catch(err => {
					console.log(err, '本地登录错误')
				})
			},
			//抖音登录
			login() {
				tt.login({
					// provider: 'toutiao', //这里服务商名是字节跳动小程序 所以填toutiao
					success: (res) => {

						this.user.anonymousCode = res.anonymousCode

						this.user.code = res.code
						this.getUserInfo()
					},
					fail(err) {
						console.log(err, '抖音登录失败')
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>


	.BFC {
		display: table-cell;
		zoom: 1;
		/*兼容IE67*/
	}

	.body {

		.tips-text {
			width: 588rpx;
			height: 136rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 45rpx;
			color: #EFEFEF;
			-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
			text-stroke: 1 rgba(0, 0, 0, 0);
			opacity: 1;
			position: relative;
			top: -50rpx;
			right: 60rpx;

		}

		.b-img {
			height: 1700rpx;
			width: 1500rpx;
			position: relative;
			right: 280rpx;
			top: 90rpx;


		}

		.center-box {
			overflow: hidden;
			height: 100rpx;
			width: 1000rpx;
			margin-top: 60rpx;
			position: relative;
			bottom: 150rpx;

		}

		.title {
			margin-top: 120rpx;
			position: absolute;
			left: 37%;
			bottom: 82%;
			height: 18px;
			font-size: 23px;
			font-weight: bold;
			line-height: 48px;
			color: #FFFFFF;
			-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
			text-stroke: 1 rgba(0, 0, 0, 0);
			opacity: 1;
		}

		.form {
			position: absolute;
			top: 42%;
			left: 20%;
			
			.name-input {
				text-align: center;
			
				width: 240px;
				height: 35px;
				background: #FFFFFF;
				border: 0.5px solid #707070;
				border-radius: 5px;
				position: relative;
				bottom: 130rpx;
				opacity: 0.8;
				margin-bottom: 30rpx;
			
			}
	
			
			
			.birth-input {
				float: left;
				text-align: center;
				width: 240px;
				height: 35px;
				background: #FFFFFF;
				border: 0.5px solid #707070;
				border-radius: 5px;
				opacity: 0.8;
			}
			
			.area-input {
				text-align: center;
				width: 240px;
				height: 35px;
				background: #FFFFFF;
				border: 0.5px solid #707070;
				border-radius: 5px;
				position: relative;
				bottom: 130rpx;
				opacity: 0.8;
			}
			.sex-box {
				position: relative;
				bottom: 70rpx;
			
			}
			
		}

		.middle-text {
			position: relative;
			bottom: 400rpx;
			left: -20rpx;
			height: 40rpx;
			line-height: 40rpx;
			color: #010101;
			margin-left: 50rpx;
			margin-top: 200rpx;

		}

		.mbutton {
			margin-top: 10rpx;
		}
	}
</style>
